<template>
    <v-chart
        class="chart"
        ref="myChart"
        @datazoom="handleDataZoom"
        group="indexChart"
        :autoresize="true"
        :loading="loading"
    />
</template>

<script setup lang="ts">
    import VChart from 'vue-echarts';

    import { loadECharts } from '@/utils/echarts';

    // chart数据
    export interface ChartItem {
        chartData: any;
    }
    if (process.client) {
        loadECharts();
    }

    const props = defineProps<ChartItem>();

    const option = ref({
        animation: false,
        tooltip: {
            // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
            trigger: 'axis',
        },
        title: {
            left: 0,
            text: '数据表',
        },
        // toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
        toolbox: {
            // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
            feature: {
                dataZoom: {
                    show: true,
                    yAxisIndex: 'none', // y轴不缩放，Index默认为0
                },
                restore: {},
                saveAsImage: {},
            },
        },
        grid: {
            left: 10,
            right: 10,
            bottom: 10,
            top: 40,
            containLabel: true, // 包含坐标轴的刻度标签
        },
        // 设置x轴的样式
        xAxis: [
            {
                type: 'category', // category为一级分类,适用于离散的类目数据
                data: [],
            },
        ],
        yAxis: [
            {
                type: 'value', // 'value' 数值轴，适用于连续数据。
                max: 200,
                min: 0,
            },
        ],
        dataZoom: [
            {
                type: 'inside', // inside: 表示用内测滑块
                xAxisIndex: [0], // 代表是作用在y轴上的
                zoomOnMouseWheel: 'ctrl', // 关闭滚轮缩放
                moveOnMouseWheel: true, // 开启滚轮平移
                moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
                start: 0, // 窗口范围的起始百分比
                end: 100, // 窗口范围的结束百分比
                minValueSpan: 200, // 窗口范围的最小值
            },
        ],
        series: [
            {
                name: '压力',
                type: 'line',
                data: [],
                symbol: 'none',
                large: true,
            },
        ],
    });

    const myChart = ref<InstanceType<typeof VChart>>();

    const emit = defineEmits<{
        (e: 'loadMore', data?: any): void;
    }>();

    const updateOptions = (data: any) => {
        if (myChart.value) {
            // let datas = data[0].map((item: any, index: number) => {
            //     return [new Date('2024-5-15 ' + item).getTime(), data[2][index]];
            // });

            option.value.series[0].data = data[2];
            option.value.xAxis[0].data = data[0];
            console.log('updateOptions', option.value);
            myChart.value.setOption(option.value, { replaceMerge: ['series', 'xAxis'] });
            loading.value = false;
            // 默认选中区域框选功能
            myChart.value.dispatchAction({
                type: 'takeGlobalCursor',
                key: 'dataZoomSelect',
                dataZoomSelectActive: true,
            });
        }
    };

    let startValue = 0;
    let endValue = 0;

    const handleDataZoom = (event: any) => {
        // 处理datazoom事件

        // 缩放操作
        if (event.batch[0].startValue) {
            // 如果值相同，则不再请求
            if (startValue === event.batch[0].startValue && endValue === event.batch[0].endValue) {
                myChart.value?.dispatchAction({
                    type: 'takeGlobalCursor',
                    key: 'dataZoomSelect',
                    dataZoomSelectActive: false,
                });
                return;
            }
            console.log('缩放', event.batch[0].startValue, event.batch[0].endValue, option.value.xAxis[0].data.length);
            startValue = event.batch[0].startValue;
            endValue = event.batch[0].endValue;
            if (startValue === endValue) {
                return;
            }
            // 处理缩放操作

            emit('loadMore', [option.value.xAxis[0].data[startValue], option.value.xAxis[0].data[endValue]]);
        }

        console.log('dataZoom', event);

        if (event.batch && event.batch.length > 0) {
            if (event.batch[0].end === 100) {
                // 处理结束
                console.log('右滑');
                // emit('loadMore');
            } else if (event.batch[0].start === 0) {
                // emit('loadMore');
                console.log('左滑');
            }
        }
    };

    const brushSelected = params => {
        console.log('brushSelected', params);
    };
    const loading = ref(true);
    emit('loadMore');

    onActivated(() => {
        nextTick(() => {
            // 多表联动
            // var canvasObj = document.getElementsByTagName('canvas');
            // if (canvasObj && canvasObj.length > 0) {
            //     var canvasH = canvasObj[0].clientWidth;
            //     if (canvasH == 0) {
            //         location.reload();
            //     }
            // }
        });
    });

    defineExpose({
        updateOptions,
    });
</script>

<style scoped>
    .chart {
        height: 180px;
    }
</style>
